
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-link"></use>
                    </svg>
                    <div class="name">链接</div>
                    <div class="fontclass">#icon-link</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-data"></use>
                    </svg>
                    <div class="name">数据</div>
                    <div class="fontclass">#icon-data</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiaoyu1"></use>
                    </svg>
                    <div class="name">教育</div>
                    <div class="fontclass">#icon-jiaoyu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhanshi"></use>
                    </svg>
                    <div class="name">展示</div>
                    <div class="fontclass">#icon-zhanshi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconfontjiaoliu"></use>
                    </svg>
                    <div class="name">交流</div>
                    <div class="fontclass">#icon-iconfontjiaoliu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-unie122"></use>
                    </svg>
                    <div class="name">下载</div>
                    <div class="fontclass">#icon-unie122</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon5"></use>
                    </svg>
                    <div class="name">关闭</div>
                    <div class="fontclass">#icon-icon5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon"></use>
                    </svg>
                    <div class="name">统计分析</div>
                    <div class="fontclass">#icon-icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-55"></use>
                    </svg>
                    <div class="name">替换</div>
                    <div class="fontclass">#icon-55</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tuichu"></use>
                    </svg>
                    <div class="name">退出</div>
                    <div class="fontclass">#icon-tuichu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xingbie"></use>
                    </svg>
                    <div class="name">性别</div>
                    <div class="fontclass">#icon-xingbie</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daimaguanli"></use>
                    </svg>
                    <div class="name">代码管理</div>
                    <div class="fontclass">#icon-daimaguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-delete"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-delete</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhizuo"></use>
                    </svg>
                    <div class="name">制作</div>
                    <div class="fontclass">#icon-zhizuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weibiaoti31"></use>
                    </svg>
                    <div class="name">错误</div>
                    <div class="fontclass">#icon-weibiaoti31</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-suoshuqiyefenhubaocunchenggong"></use>
                    </svg>
                    <div class="name">所属企业_分户保存成功</div>
                    <div class="fontclass">#icon-suoshuqiyefenhubaocunchenggong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-question"></use>
                    </svg>
                    <div class="name">问号</div>
                    <div class="fontclass">#icon-icon-question</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiazai"></use>
                    </svg>
                    <div class="name">下载</div>
                    <div class="fontclass">#icon-xiazai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baocun"></use>
                    </svg>
                    <div class="name">保存</div>
                    <div class="fontclass">#icon-baocun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tongji9"></use>
                    </svg>
                    <div class="name">统计9</div>
                    <div class="fontclass">#icon-tongji9</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yiliao"></use>
                    </svg>
                    <div class="name">医疗</div>
                    <div class="fontclass">#icon-yiliao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31leimu"></use>
                    </svg>
                    <div class="name">3.1类目</div>
                    <div class="fontclass">#icon-31leimu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianhua2"></use>
                    </svg>
                    <div class="name">电话 (2)</div>
                    <div class="fontclass">#icon-dianhua2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-biji"></use>
                    </svg>
                    <div class="name">笔记</div>
                    <div class="fontclass">#icon-biji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiaolian1"></use>
                    </svg>
                    <div class="name">老师</div>
                    <div class="fontclass">#icon-jiaolian1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jishus"></use>
                    </svg>
                    <div class="name">技术s</div>
                    <div class="fontclass">#icon-jishus</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiaoyu"></use>
                    </svg>
                    <div class="name">教育</div>
                    <div class="fontclass">#icon-jiaoyu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yunongtongshenfenzhenghaoma"></use>
                    </svg>
                    <div class="name">裕农通-身份证号码</div>
                    <div class="fontclass">#icon-yunongtongshenfenzhenghaoma</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhengque"></use>
                    </svg>
                    <div class="name">正确</div>
                    <div class="fontclass">#icon-zhengque</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shipin"></use>
                    </svg>
                    <div class="name">视频</div>
                    <div class="fontclass">#icon-shipin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fuli"></use>
                    </svg>
                    <div class="name">福利</div>
                    <div class="fontclass">#icon-fuli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenxiang"></use>
                    </svg>
                    <div class="name">分享</div>
                    <div class="fontclass">#icon-fenxiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-myhomequanxuan"></use>
                    </svg>
                    <div class="name">全选</div>
                    <div class="fontclass">#icon-myhomequanxuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuozuo"></use>
                    </svg>
                    <div class="name">左</div>
                    <div class="fontclass">#icon-zuozuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baocunchenggong"></use>
                    </svg>
                    <div class="name">保存成功</div>
                    <div class="fontclass">#icon-baocunchenggong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mubiao"></use>
                    </svg>
                    <div class="name">目标</div>
                    <div class="fontclass">#icon-mubiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baocun1"></use>
                    </svg>
                    <div class="name">保存</div>
                    <div class="fontclass">#icon-baocun1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jia"></use>
                    </svg>
                    <div class="name">加</div>
                    <div class="fontclass">#icon-jia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-you"></use>
                    </svg>
                    <div class="name">右</div>
                    <div class="fontclass">#icon-you</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mingcheng"></use>
                    </svg>
                    <div class="name">名称</div>
                    <div class="fontclass">#icon-mingcheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jianhao"></use>
                    </svg>
                    <div class="name">减号</div>
                    <div class="fontclass">#icon-jianhao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bofang"></use>
                    </svg>
                    <div class="name">播放</div>
                    <div class="fontclass">#icon-bofang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuju"></use>
                    </svg>
                    <div class="name">数据</div>
                    <div class="fontclass">#icon-shuju</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tupian3"></use>
                    </svg>
                    <div class="name">图片</div>
                    <div class="fontclass">#icon-tupian3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hulianwangkejileihangye"></use>
                    </svg>
                    <div class="name">互联网科技类行业</div>
                    <div class="fontclass">#icon-hulianwangkejileihangye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-f3"></use>
                    </svg>
                    <div class="name">优秀项目案例</div>
                    <div class="fontclass">#icon-f3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-SOPliuchengshuoming"></use>
                    </svg>
                    <div class="name">SOP流程说明</div>
                    <div class="fontclass">#icon-SOPliuchengshuoming</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bangzhu"></use>
                    </svg>
                    <div class="name">帮助</div>
                    <div class="fontclass">#icon-bangzhu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-suoxiao"></use>
                    </svg>
                    <div class="name">缩小</div>
                    <div class="fontclass">#icon-suoxiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xujiliebiao-"></use>
                    </svg>
                    <div class="name">虚机列表</div>
                    <div class="fontclass">#icon-xujiliebiao-</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiaose"></use>
                    </svg>
                    <div class="name">角色</div>
                    <div class="fontclass">#icon-jiaose</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xuanzhongyuandian"></use>
                    </svg>
                    <div class="name">未选中圆点</div>
                    <div class="fontclass">#icon-xuanzhongyuandian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangchuan"></use>
                    </svg>
                    <div class="name">上传</div>
                    <div class="fontclass">#icon-shangchuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tongji"></use>
                    </svg>
                    <div class="name">统计</div>
                    <div class="fontclass">#icon-tongji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-banjiguanli"></use>
                    </svg>
                    <div class="name">班级管理</div>
                    <div class="fontclass">#icon-banjiguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-suoxiao2"></use>
                    </svg>
                    <div class="name">缩小</div>
                    <div class="fontclass">#icon-suoxiao2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jianqieban"></use>
                    </svg>
                    <div class="name">剪切板</div>
                    <div class="fontclass">#icon-jianqieban</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-refresh"></use>
                    </svg>
                    <div class="name">新东方-刷新图标</div>
                    <div class="fontclass">#icon-refresh</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-down-trangle"></use>
                    </svg>
                    <div class="name">向下边框三角</div>
                    <div class="fontclass">#icon-down-trangle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jieshao"></use>
                    </svg>
                    <div class="name">介绍</div>
                    <div class="fontclass">#icon-jieshao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fangdajing"></use>
                    </svg>
                    <div class="name">放大镜</div>
                    <div class="fontclass">#icon-fangdajing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiangmumingcheng"></use>
                    </svg>
                    <div class="name">项目名称</div>
                    <div class="fontclass">#icon-xiangmumingcheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-you1"></use>
                    </svg>
                    <div class="name">右</div>
                    <div class="fontclass">#icon-you1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gongzuoqu_zidingyi"></use>
                    </svg>
                    <div class="name">工作区_12自定义</div>
                    <div class="fontclass">#icon-gongzuoqu_zidingyi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fangda"></use>
                    </svg>
                    <div class="name">放大</div>
                    <div class="fontclass">#icon-fangda</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-suoxiao1"></use>
                    </svg>
                    <div class="name">缩小</div>
                    <div class="fontclass">#icon-suoxiao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu2"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinrong"></use>
                    </svg>
                    <div class="name">金融</div>
                    <div class="fontclass">#icon-jinrong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-SliceCopy"></use>
                    </svg>
                    <div class="name">镜像</div>
                    <div class="fontclass">#icon-SliceCopy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chanpinjiejuefangan"></use>
                    </svg>
                    <div class="name">案例展示</div>
                    <div class="fontclass">#icon-chanpinjiejuefangan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-add"></use>
                    </svg>
                    <div class="name">添加</div>
                    <div class="fontclass">#icon-add</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-anli"></use>
                    </svg>
                    <div class="name">案例</div>
                    <div class="fontclass">#icon-anli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qita"></use>
                    </svg>
                    <div class="name">其他</div>
                    <div class="fontclass">#icon-qita</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiangji1"></use>
                    </svg>
                    <div class="name">相机</div>
                    <div class="fontclass">#icon-xiangji1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shiti-moren"></use>
                    </svg>
                    <div class="name">试题-默认</div>
                    <div class="fontclass">#icon-shiti-moren</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ziyuan"></use>
                    </svg>
                    <div class="name">互联网/资源共享</div>
                    <div class="fontclass">#icon-ziyuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-moxing"></use>
                    </svg>
                    <div class="name">模型</div>
                    <div class="fontclass">#icon-moxing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-laodongzhegerenxinxiqia"></use>
                    </svg>
                    <div class="name">劳动者个人信息卡</div>
                    <div class="fontclass">#icon-laodongzhegerenxinxiqia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hangkongyunshu"></use>
                    </svg>
                    <div class="name">航空运输</div>
                    <div class="fontclass">#icon-hangkongyunshu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dizhi"></use>
                    </svg>
                    <div class="name">地址</div>
                    <div class="fontclass">#icon-dizhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kecheng"></use>
                    </svg>
                    <div class="name">课程</div>
                    <div class="fontclass">#icon-kecheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shujuyuan"></use>
                    </svg>
                    <div class="name">数据源</div>
                    <div class="fontclass">#icon-shujuyuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tongzhi"></use>
                    </svg>
                    <div class="name">通知</div>
                    <div class="fontclass">#icon-tongzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiaotongditiedongchegaotiemianxing"></use>
                    </svg>
                    <div class="name">交通 地铁 动车 高铁 面性</div>
                    <div class="fontclass">#icon-jiaotongditiedongchegaotiemianxing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-keshihua"></use>
                    </svg>
                    <div class="name">可视化</div>
                    <div class="fontclass">#icon-keshihua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mubiao1"></use>
                    </svg>
                    <div class="name">目标</div>
                    <div class="fontclass">#icon-mubiao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liuchengsheji"></use>
                    </svg>
                    <div class="name">1流程设计</div>
                    <div class="fontclass">#icon-liuchengsheji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jishuzhichi"></use>
                    </svg>
                    <div class="name">技术支持</div>
                    <div class="fontclass">#icon-jishuzhichi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yuanshuju"></use>
                    </svg>
                    <div class="name">源数据</div>
                    <div class="fontclass">#icon-yuanshuju</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangchuan_update"></use>
                    </svg>
                    <div class="name">上传 (1)_update</div>
                    <div class="fontclass">#icon-shangchuan_update</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tihuan2"></use>
                    </svg>
                    <div class="name">替换</div>
                    <div class="fontclass">#icon-tihuan2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-buzhoutiaozheng"></use>
                    </svg>
                    <div class="name">步骤调整</div>
                    <div class="fontclass">#icon-buzhoutiaozheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanbifenxiang"></use>
                    </svg>
                    <div class="name">关闭分享</div>
                    <div class="fontclass">#icon-guanbifenxiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-computer"></use>
                    </svg>
                    <div class="name">电脑</div>
                    <div class="fontclass">#icon-computer</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-nongyeguangai"></use>
                    </svg>
                    <div class="name">农业灌溉</div>
                    <div class="fontclass">#icon-nongyeguangai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhongxinxuanze"></use>
                    </svg>
                    <div class="name">重新选择</div>
                    <div class="fontclass">#icon-zhongxinxuanze</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kaiguanswitch-zhengque"></use>
                    </svg>
                    <div class="name">开关 switch-正确</div>
                    <div class="fontclass">#icon-kaiguanswitch-zhengque</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-custom-communicat"></use>
                    </svg>
                    <div class="name">通信</div>
                    <div class="fontclass">#icon-custom-communicat</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-test-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy"></use>
                    </svg>
                    <div class="name">设置</div>
                    <div class="fontclass">#icon-icon-test-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangchuan1"></use>
                    </svg>
                    <div class="name">上传 (1)</div>
                    <div class="fontclass">#icon-shangchuan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tihuan"></use>
                    </svg>
                    <div class="name">替换</div>
                    <div class="fontclass">#icon-tihuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tongji1"></use>
                    </svg>
                    <div class="name">统计</div>
                    <div class="fontclass">#icon-tongji1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiaoxue"></use>
                    </svg>
                    <div class="name">教学</div>
                    <div class="fontclass">#icon-jiaoxue</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xingbie---"></use>
                    </svg>
                    <div class="name">性别---</div>
                    <div class="fontclass">#icon-xingbie---</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuanyiquanxian"></use>
                    </svg>
                    <div class="name">zhuanyiquanxian</div>
                    <div class="fontclass">#icon-zhuanyiquanxian</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
